<!--
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://lib.baomitu.com/echarts/5.2.0/echarts.common.js"></script>
</head>
<body>
<div style="width: 900px;height: 600px;" id="pie"></div>
<div style="height: 50px"></div>
<div style="width: 900px;height: 600px" id="line"></div>
<div style="height: 50px"></div>
<div style="width: 900px;height: 600px" id="bar"></div>
</body>
<script type="text/javascript">
    var chartDom = document.getElementById('pie');
    var myChart = echarts.init(chartDom);
    var option = {
        title: {
            text: '饼图事例',
            subtext: 'Fake Data',
            left: 'left'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: 'top'
        },
        toolbox: {
            show: true,
            feature: {
                mark: {show: true},
                dataView: {show: true, readOnly: false},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        series: [
            {
                name: '面积模式',
                type: 'pie',
                radius: [50, 250],
                center: ['50%', '50%'],
                roseType: 'area',
                itemStyle: {
                    borderRadius: 8
                },
                data: []
            }
        ]
    };


    fetch("/echarts").then(response => response.json()).then(res => {
        //折线图
        const date = res.map(v => v.date);
        console.log(date)
        lineoption.xAxis.data = date
        const count = res.map(v => v.count);
        console.log(count)
        lineoption.series[0].data=count
        lineChart.setOption(lineoption)

        //柱状图

        console.log(date)
        baroption.xAxis.data = date

        console.log(count)
        baroption.series[0].data=count
        barChart.setOption(baroption)
        //南丁格尔玫瑰图
        console.log(res)
        res.forEach(item => {
            option.series[0].data.push({name: item.name, value: item.count})
        })
        console.log(option)
        myChart.setOption(option);
    })

    //    折线图
    var lineDom = document.getElementById('line');
    var lineChart = echarts.init(lineDom);

    lineoption = {
        title: {
            text: '营销数据'
        },
        legend: {
            top: 'top'
        },
        xAxis: {
            type: 'category',
            data: []
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name:'111',
                data: [],
                type: 'line'
            },
            {
                name:'222',
                data: [100,200,20,80,260],
                type: 'line'
            }
        ]
    };

//    柱状图
    baroption = {
        title: {
            text: '柱状图'
        },
        legend: {
            top: 'top'
        },
        xAxis: {
            type: 'category',
            data: []
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name:'111',
                data: [],
                type: 'bar'
            },
            {
                name:'222',
                data: [100,200,20,536,57],
                type: 'bar'

            },
        ]
    };
    var barDom = document.getElementById('bar');
    var barChart = echarts.init(barDom);

</script>
</html>
-->


<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="icon" href="/static/images/favicon.ico">
</head>
<body>
<h1>ccc</h1>
</body>
</html>
